<template>
	<view class="container">
		<u-form :model="form" ref="uForm" label-position="top" :label-width="130">
			<u-form-item label="手机账号" prop="phone">
				<u-input v-model="form.phone" placeholder="请输入手机号码" type="number"/>
			</u-form-item>
			<u-form-item label="验证码" prop="verifyCode">
				<u-input v-model="form.verifyCode" placeholder="请输入验证码"/>
				<u-button slot="right" type="success" size="mini" @click="getCode">{{codeTips}}</u-button>
			</u-form-item>
			<u-form-item label="新密码" prop="newPassword">
				<u-input v-model="form.newPassword" placeholder="请输入新密码" type="password"/>
			</u-form-item>
			<u-form-item label="确认密码" prop="confirmPassword">
				<u-input v-model="form.confirmPassword" placeholder="请确认新密码" type="password"/>
			</u-form-item>

			<u-button class="action" @click="commitClick">确认</u-button>
			
			<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
		</u-form>
	</view>
</template>

<script>
	import {
		forgetPassword,
		sendCode
	} from '@/api/user.js'
	import md5 from "@/utils/md5.js";
	export default {
		data() {
			return {
				form: {
					phone: '',
					verifyCode: '',
					newPassword: '',
					confirmPassword: ''
				},
				rules: {
					phone: [
						{
							required: true,
							message: '请输入手机号',
							trigger: ['change'],
						},
						{
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['change'],
						}
					],
					verifyCode: [{
						required: true,
						message: '请输入验证码',
						trigger: ['change'],
					}],
					newPassword: [{
						required: true,
						message: '请输入新密码',
						trigger: ['change'],
					}],
					confirmPassword: [{
						required: true,
						message: '请确认新密码',
						trigger: ['change'],
					}],
				},
				
				codeTips: '',
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			commitClick() {
				console.log('commitClick');
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.modify();
					}
				});
			},

			modify() {
				if (this.form.newPassword !== this.form.confirmPassword) {
					this.$u.toast('两次密码不一致');
					return;
				}
				const newPassword = md5.hex_md5(this.form.newPassword)
				const confirmPassword = md5.hex_md5(this.form.confirmPassword)
				
				uni.showLoading({})
				forgetPassword({ ...this.form, newPassword, confirmPassword }).then(res => {
					console.log(res);
					uni.hideLoading();
					uni.showToast({
						icon: 'none',
						title: '密码重置成功',
						success() {
							uni.navigateBack({})
						}
					})
				})
			},
			
			codeChange(text) {
				this.codeTips = text;
			},
			// 获取验证码
			getCode() {
				if (!this.$u.test.mobile(this.form.phone)) {
					this.$u.toast('手机号码不正确');
					return;
				}
				if(this.$refs.uCode.canGetCode) {
					this.sendCode();
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			
			sendCode() {
				uni.showLoading({
					title: '正在获取验证码',
					mask: true
				})
				sendCode(this.form.phone).then(res => {
					uni.hideLoading();
					this.$u.toast('验证码已发送');
					this.$refs.uCode.start();
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $app-page-bg-color;
	}
</style>
<style lang="scss">
	@import '@/css/u-form.scss';

	.container {
		padding-left: 40rpx;
		padding-right: 40rpx;
	}

	.action {
		margin-top: 60rpx;
	}
</style>
